<template>
  <fieldset>
    <legend>计数器</legend>
    <button @click="DECREMENT_NUM(5)">-</button>
    &nbsp; &nbsp;
    <b>{{ num }}</b>
    &nbsp; &nbsp;
    <button @click="$store.commit('INCREMENT_NUM', 10)">+</button>
    <h1>user:{{ user }}</h1>

    <button @click="GET_PRODUCT(10)">获取产品</button>
    <!-- <button @click="getCart">获取产品</button> -->

    <ul>
      <li v-for="item in products" :key="item.id">{{ item.title }}</li>
    </ul>
    <h1>msg:{{ msg }}</h1>
    <h1>msg:{{ $store.getters.reverseMsg }}</h1>
    <h1>msg:{{ reverseMsg }}</h1>
  </fieldset>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["num", "user", "products", "msg"]),
    ...mapGetters(["reverseMsg"]),
  },
  methods: {
    ...mapMutations(["DECREMENT_NUM"]),
    ...mapActions(["GET_PRODUCT"]),
    // getCart() {
    //   this.$store.dispatch("GET_PRODUCT", 20);
    // },
  },
  data() {
    return {};
  },
  mounted() {},
};
</script>
